<script setup>
//数据
const iconList = [
  { imgName: "超市", desc: "超市便利" },
  { imgName: "菜市场", desc: "菜市场" },
  { imgName: "水果店", desc: "水果店" },
  { imgName: "鲜花", desc: "鲜花绿植" },
  { imgName: "医药健康", desc: "医药健康" },
  { imgName: "家居", desc: "家居时尚" },
  { imgName: "蛋糕", desc: "烘培蛋糕" },
  { imgName: "签到", desc: "签到" },
  { imgName: "大牌免运", desc: "大牌免运" },
  { imgName: "红包", desc: "红包套餐" }
];
</script>

<template>
  <div>
    <!-- 定位 -->
    <div class="position">
      <span class="iconfont position_icon">&#xe619;</span>
      <span class="position_name">北京理工大学国防科技园2号楼10层</span>
      <span class="iconfont position_notice">&#xe7e5;</span>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont">&#xe632;</span>
      <span class="search_text">山姆会员商店优惠商品</span>
    </div>
    <!-- banner -->
    <div class="banner">
      <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt class="banner_img" />
    </div>
    <!-- 图标列表 -->
    <div class="icon_list">
      <div class="icon_item" v-for="item in iconList">
        <img class="icon_item_img" :src="'http://www.dell-lee.com/imgs/vue3/' + item.imgName + '.png'" alt />
        <p class="icon_item_desc">{{ item.imgName }}</p>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="gap"></div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/mixins.scss";
@import "@/style/viriables.scss";

//定位
.position {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 0.22rem;
  font-size: 0.16rem;
  padding: 0.16rem 0.24rem 0.16rem 0;

  .position_icon {
    font-size: 0.2rem;
  }

  &_name {
    @include ellipse;
    margin-left: 0.08rem;
    color: $content-fontcolor;
  }

  .position_notice {
    position: absolute;
    right: 0;
    font-size: 0.2rem;
  }
}

//搜索
.search {
  margin-bottom: 0.16rem;
  padding-left: 0.16rem;
  line-height: 0.32rem;
  background-color: #f5f5f5;
  border-radius: 0.16rem;

  &_text {
    margin-left: 0.12rem;
    font-size: 0.14rem;
    font-family: PingFangSC-Regular;
    color: #b7b7b7;
  }
}

//banner
.banner {
  &_img {
    width: 100%;
  }
}

//图标列表
.icon_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.16rem;

  .icon_item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_img {
      width: 0.4rem;
      height: 0.4rem;
    }

    &_desc {
      margin: 0.06rem 0 0.16rem 0;
    }
  }
}

//分割线
.gap {
  height: 0.1rem;
  background-color: #f1f1f1;
  margin: 0 -0.18rem;
}
</style>